import {ElementRef, NgZone} from '@angular/core';
import {UrlAndOPT} from './url-and-opt.enum';

/**
 * 基础Tab类
 * 包含获取ion-header中的元素方法
 * 侦听ion-content滚动，动态改变ion-toolbar和ion-title样式
 */
export class BaseTabPage {

  public HOST = UrlAndOPT.HOST;
  // header中的toolbar和title
  public ionToolbar = null;
  public ionTitle = null;
  // 初始透明度
  public headerOpacity = 0;
  public rgbObj = {
    r: '243',
    g: '121',
    b: '56'
  };
  // 设置变化的范围(默认标题文字和背景都变化)
  public headerChangedPart = {
    ionToolbar: true,
    ionTitle: true
  };

  constructor(public zone: NgZone,
              public elRef: ElementRef) {
  }

  // 初始获取变化的元素
  getTopElement() {
    if (this.headerChangedPart.ionToolbar) {
      this.ionToolbar = this.elRef.nativeElement.querySelector('.opacity-toolbar');
    }
    if (this.headerChangedPart.ionTitle) {
      this.ionTitle = this.elRef.nativeElement.querySelector('.opacity-title');
    }
  }

  // 侦听content滚动事件，动态更改元素样式
  scrollHandler(event) {
    this.zone.runOutsideAngular(() => {
      this.headerOpacity = event.detail.scrollTop / 100;
      if (this.headerOpacity < 2) {
        if (this.ionToolbar) {
          this.ionToolbar.style.setProperty(
            '--background',
            'rgba(' + this.rgbObj['r'] + ', ' + this.rgbObj['g'] + ', ' + this.rgbObj['b'] + ', '
            + (this.headerOpacity > 1 ? 1 : this.headerOpacity) + ')'
          );
        }
        if (this.ionTitle) {
          this.ionTitle.style.setProperty('opacity', this.headerOpacity > 1 ? 1 : this.headerOpacity);
        }
      }
    });
  }

}
